<template>
    <div>
        <div>
            <Row>
                <Col span="7">
                    <Card dis-hover style="border-top:4px solid orange;margin-top:20px;line-height: 2.0em;">
                        <p slot="title" class="title"><span style="font-size:16px">企业信息</span></p>
                        <p class="title"><router-link style="color:black" :to="{name:'personal_exhibition',params:{id: demand_detail.member.id} }"><b>{{demand_detail.member.enterprise_name}}</b></router-link></p>
                        <p><b>企业评分：</b><Rate v-if="demand_detail.member.rate" allow-half disabled show-text v-model="demand_detail.member.rate"></Rate><span v-if="!demand_detail.member.rate">暂无评分</span></p>
                        <p>
                            <b>企业认证：</b>
                            <div>
                                <Row style="text-align:center">
                                    <Col span="8">
                                    <Button :type="demand_detail.member.is_mobile_phone_authed?'success':'ghost'" 
                                        size="large" shape="circle" icon="android-phone-portrait"
                                        :title="demand_detail.member.is_mobile_phone_authed?'手机已认证':'手机未认证'"></Button>
                                        <p><b v-if="demand_detail.member.is_mobile_phone_authed==true" style="font-size:12px">手机已认证</b><b v-if="demand_detail.member.is_mobile_phone_authed!=true" style="font-size:12px">手机未认证</b></p>
                                    </Col>
                                    <Col span="8">
                                    <Button :type="demand_detail.member.is_email_authed?'success':'ghost'" 
                                        size="large" shape="circle" icon="ios-email"
                                        :title="demand_detail.member.is_email_authed?'邮箱已认证':'邮箱未认证'"></Button>
                                        <p><b v-if="demand_detail.member.is_email_authed==true" style="font-size:12px">邮箱已认证</b><b v-if="demand_detail.member.is_email_authed!=true" style="font-size:12px">邮箱未认证</b></p>
                                    </Col>
                                    <Col span="8">
                                    <Button :type="demand_detail.member.status==2?'success':'ghost'" 
                                        size="large" shape="circle" icon="card"
                                        :title="demand_detail.member.status==2?'身份已认证':'身份未认证'"></Button>
                                        <p><b v-if="demand_detail.member.status==2" style="font-size:12px">身份已认证</b><b v-if="demand_detail.member.status!=2" style="font-size:12px">身份未认证</b></p>
                                    </Col>
                                </Row>
                            </div>
                        </p>
                        <p><b>所在地区：</b>{{demand_detail.member.area.join("")}}</p>
                        <p><b>企业简介：</b>{{formatContent(demand_detail.member.enterprise_profile)}}</p>

                    </Card>
                </Col>
                <Col span="17">
                    <Card dis-hover style="border-top:4px solid orange;margin-top:20px;margin-left:20px;line-height: 2.0em;">
                        <p slot="title" class="title"><span style="font-size:16px">{{demand_detail.title}}</span></p>
                        <div>
                            <Row style="margin-top:10px;border-bottom:2px dash black">
                                <Col span="3"><b>需求类别：</b></Col>
                                <Col span="13">{{demand_detail.m_type}}</Col>
                                <Col span="3"><b>发布时间：</b></Col>
                                <Col>{{ demand_detail.format_create_time}}</Col>
                            </Row>
                            <Row style="margin-top:10px;border-bottom:2px dash black">
                                <Col span="3"><b>项目简介：</b></Col>
                                <Col span="21"><div>{{demand_detail.demand_content}}</div></Col>
                            </Row style="margin-top:10px;border-bottom:2px dash black">
                            <Row v-if="demand_detail.item_type!=''">
                                <Col span="3"><b>项目规模：</b></Col>
                                <Col span="21">{{demand_detail.item_type}}</Col>
                            </Row>
                            <Row style="margin-top:10px;border-bottom:2px dash black">
                                <Col span="3"><b>涉及领域：</b></Col>
                                <Col span="21">{{demand_detail.demand_industry.join("、")}}</Col>
                            </Row>
                            <Row style="margin-top:10px;border-bottom:2px dash black">
                                <Col span="3"><b>开始时间：</b></Col>
                                <Col span=9>{{ demand_detail.demand_beginDate}}</Col>
                                <Col span="3"><b>结束时间：</b></Col>
                                <Col span=9>{{demand_detail.demand_endDate}}</Col>
                            </Row>
                            <Row style="margin-top:10px;border-bottom:2px dash black">
                                
                                <Col v-if="demand_detail.demand_Invest!=null" span="3"><b>总投资：</b></Col>
                                <Col v-if="demand_detail.demand_Invest!=null" span="5"><b style="font-size:20px;color:red">{{demand_detail.demand_Invest}}</b>&nbsp;万元</Col>
                                <Col v-if="demand_detail.demand_presentInvest!=null" span="3"><b>已投资：</b></Col>
                                <Col v-if="demand_detail.demand_presentInvest!=null" span="5"><b style="font-size:20px;color:red">{{demand_detail.demand_presentInvest}}</b>&nbsp;万元</Col>
                                <Col v-if="demand_detail.demand_needInvest!=null" span="3"><b>需融资：</b></Col>
                                <Col v-if="demand_detail.demand_needInvest!=null" span="5"><b style="font-size:20px;color:red">{{demand_detail.demand_needInvest}}</b>&nbsp;万元</Col>
                            </Row>
                            <Row v-if="demand_detail.demand_use!=''" style="margin-top:10px;border-bottom:2px dash black">
                                <Col span="3"><b>融资用途：</b></Col>
                                <Col span="21">{{demand_detail.demand_use}}</Col>
                            </Row>
                            <Row v-if="demand_detail.demand_diya!=''" style="margin-top:10px;border-bottom:2px dash black">
                                <Col span="3"><b>抵押物：</b></Col>
                                <Col span="21">{{demand_detail.demand_diya}}</Col>
                            </Row>
                            <Row style="margin-top:10px;border-bottom:2px dash black">
                                <Col span="3"><b>所在地区：</b></Col>
                                <Col span="9">{{demand_detail.demand_area.join("")}}</Col>
                            </Row>
                            <Row style="margin-top:10px;border-bottom:2px dash black">
                                <Col span="3"><b>联系人：</b></Col>
                                <Col span="7">{{demand_detail.demand_master}}</Col>
                                <Col span="3"><b>联系电话：</b></Col>
                                <Col span="7">{{demand_detail.demand_tele}}</Col>
                            </Row>
                            <Row style="margin-top:10px;border-bottom:2px dash black">
                                <Col span="3"><b>地址：</b></Col>
                                <Col span="21">{{demand_detail.demand_address}}</Col>
                            </Row>
                            <Row v-if="demand_detail.demand_remark!=''" style="margin-top:10px;border-bottom:2px dash black">
                                <Col span="3"><b>备注：</b></COl>
                                <Col span="21">{{demand_detail.demand_remark}}</Col>
                            </Row>
                            <Row style="margin-top:10px;border-bottom:2px dash black">
                                <Col span="3">
                                    <b>浏览次数：</b>
                                </Col>
                                <Col span="21">
                                    {{demand_detail.view_times}}
                                </Col>
                            </Row>
                        </div>
                        <div style="height:100px">

                            <Row style="margin-top:30px">
                                <Col span="24" style="text-align:center">
                                    <Button type="primary" @click="provideService">提供服务</Button>
                                </Col>
                                <!-- <Col span="12">
                                    <Button style="margin-left:10px" type="primary" @click="connectDemand">联系需求商</Button>
                                </Col> -->
                            </Row>
                        </div>
                    </Card>
                </Col>
            </Row>
        </div>
        <Modal v-model="modal1" title="确认与当前需求的对接" >
            <Row>
                <div>
                    <Form ref="bindingForm" :model="form" :rules="rules" >
                        <FormItem prop="title" label="标题：">
                            <Input type="text" v-model="form.title" placeholder="请输入标题"></Input>
                        </FormItem>
                        <FormItem prop="service_id" label="对接的服务：">
                            <Select v-model="form.service_id">
                                <Option v-for="item in service.list" :value="item.id" :key="item.id">{{item.title}}</Option>
                            </Select>
                        </FormItem>
                        <FormItem prop="content" label="服务内容：">
                            <Input type="text" v-model="form.content" placeholder="请输入内容"></Input>
                        </FormItem>
                        
                    </Form>
                </div>
            </Row>
            <div slot="footer">
                <Row>
                    <Col span="22">
                        <Button type="primary" @click="ok" style="margin-left:10px">确认</Button>
                    </Col>
                    <Col span="2">
                        <Button @click="del">取消</Button>
                    </Col>
                </Row>
            </div>
        </Modal>
        <Modal v-model="modal2" @on-ok="Login" @on-cancel="cancel">
            <b><font size="3">请先登录，点击确认跳转到登陆页面</font></b>
        </Modal>
    </div>
</template>
<script>
import Cookies from 'js-cookie';
import util from "../../libs/util";
import Service from "@/common/model/Service";
import Demand from "@/common/model/Demand";
export default {

    data(){
        const validateserviceid = (rule, value, callback) => {
            if (this.form.service_id == '') {
                callback(new Error('请选择对应服务'));
            }else{
                callback();
            }
        };
        return{
            form:{
                title:'',
                content:'',
                service_id:''
            },
            rules:{
                title:[
                    {required: true, message:'标题不能为空',trigger:'blur'}
                ],
                content:[
                    {required: true, message:'内容不能为空',trigger:'blur'}
                ],
                service_id:[
                    {required: true, validator:validateserviceid,trigger:'blur'}
                ]
            },
            is_landing: Cookies.get('access') == "member",
            modal1: false,
            modal2: false,
            demand_detail: new Demand(),
            service:{
                list:[]
            },
        }
    },
    methods:{
        ok(){
            this.$refs.bindingForm.validate((valid) => {
                if(valid){
                    this.api.post("abutment/bindings",{sponsor: "provider" ,demand_member_id: this.demand_detail.member.id ,service_id: this.form.service_id ,demand_id: this.demand_detail.id ,title: this.form.title ,description: this.form.content},res=>{
                        this.bindingResult=res.value;
                        if(this.bindingResult==true){
                            this.$CustomMessage.info("已向对方投递请求！");
                            this.modal1=false;
                            window.location.href = util.getRuntimeUrl('member', 'service_manage/interview_initiated');
                        }else{
                            this.$CustomMessage.error("请求失败，请联系管理员");
                        }
                    })
                }
            })

        },
        formatContent(mes){
            if(mes.length>100){
                mes=mes.substring(0,99)+"……";
            }
            return mes;
        },
        cancel(){

        },
        del(){
            this.modal1 = false;
        },
        Login(){
            this.$router.push({name:"login"});
        },
        provideService(){
            if(this.is_landing){
                this.api.post("abutment/is_bindings",{demand_id:this.demand_detail.id ,demand_member_id: this.demand_detail.member.id},res=>{
                    var r=res.value;
                    if(r){
                        this.api.post("service/page", {status:2},res=>{
                            this.service.list = Service.parseList(res.page.list);
                            this.modal1 = true;

                        })
                    }else{
                        this.$CustomMessage.info("您已经对接过此项目！");
                        // this.$CustomMessage.error({
                        //     content: "您已经对接过此项目！",
                        //     duration: 3,
                        //     closable: true
                        // });
                    }

                })

            }else{
                this.modal2 = true;
            }
        },
        connectDemand(){

        }
    },
    created(){
        this.is_landing = Cookies.get('access') == "member";
        this.api.post("demand/get", {id:this.$route.params.id},res=>{
            this.demand_detail.parse(res.data);
            this.form.title = this.demand_detail.title;
            this.form.content = "为《" + this.demand_detail.title + "》提供相关服务";
        })
    }
}
</script>
<style>
    .title{
        text-align:center;

    }
    
</style>
